<template>
	<view class="wrap">
    <u-gap height="40"></u-gap>
    <u-notice-bar :text="notice" mode="closable" speed="40" color="#3c9cff" bgColor="#ecf5ff"></u-notice-bar>
    <u-gap height="20"></u-gap>
		<view class="charts-box">
		  <qiun-data-charts type="gauge" :opts="{title:{name: '6M/S',color: '#2fc25b',fontSize: 25,offsetY:50},subtitle: {name: '网络速度',color: '#666666',fontSize: 15,offsetY:-50}}" :chartData="chartsDataGauge"/>
		</view>
     <u-gap height="20"></u-gap>
    <view class="charts-box">
      <qiun-data-charts type="word" :chartData="chartsDataWord"/>
    </view>
	</view>
</template>

<script>
import { homeIndex } from '@/api/component'
	export default {
		data() {
			return {
				notice: 'future报表模块',
        chartsDataGauge: {},
        chartsDataWord: {}
			};
		},
		onLoad() {

		},
		computed: {

		},
		mounted() {

		},
    onReady() {
      //模拟从服务器获取数据
      this.getServerData()
    },
		methods: {
			getServerData() {
        homeIndex({params: {}, custom: { auth: false,toast: false }}).then(response => {
          this.chartsDataGauge=JSON.parse(JSON.stringify(response.data.Gauge))
          this.chartsDataWord=JSON.parse(JSON.stringify(demodata.Word))
        })
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      }
		}
	};
</script>

<style lang="scss">

  .charts-box {
    padding-top: 0px;
    width: 100%;
    height: 400px;
  }

</style>
